<template>
    <div id="scroll">
        <yd-pullrefresh :callback="callLoadList" ref="pullrefreshDemo">
            <div class="fiexd_search">
                <yd-search v-model="value" cancel-text='' :on-submit="submitHandler"></yd-search>
                <ul class="fiexd_ul">
                    <li @click.stop="show = true">
                        {{model}}
                        <yd-icon name="arrow-left-copy" custom slot="icon"></yd-icon>
                    </li>
                    <li @click.stop="showCompany =true">
                        {{companyText}}
                        <!-- <yd-icon name="arrow-left-copy" custom slot="icon"></yd-icon> -->
                    </li>
                </ul>
            </div>
            <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
                <!--列表  爱心捐赠-->
                <yd-list theme="3" slot="list">
                    <!-- <yd-list-item :href="{name: 'commodity',query: {goodsCommonid: item.goodsCommonid}}" type="link" v-for="(item, key) in list" :key="key"> -->
                    <yd-list-item v-for="(item, key) in list" :key="key">
                        <img slot="img" style="height:3.35rem" :src="imgUrl+item.goodsImage" @click="commodity(item.goodsCommonid)">
                        <span slot="title">{{item.goodsName}}</span>
                        <yd-list-other slot="other">
                            <div>
                                <span class="demo-list-price">
                                    <em>¥</em>
                                    <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                                </span>
                            </div>
                            <!-- <div>content</div> -->
                        </yd-list-other>
                    </yd-list-item>
                </yd-list>
                <!-- 数据全部加载完毕显示 -->
                <span slot="doneTip">—— 到底啦 ——</span>
                <!-- 加载中提示，不指定，将显示默认加载中图标 -->
                <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />
            </yd-infinitescroll>
        </yd-pullrefresh>
        <!-- <yd-backtop></yd-backtop> -->
        <yd-cityselect v-if="districtcounty.length>0" title='选择地区' v-model="show" ref="cityselectDemo" :callback="resultCounty" :items="districtcounty"></yd-cityselect>
        <!-- <yd-cityselect v-if="districtcompany.length>0" title='选择企业' v-model="showCompany" ref="cityselectCompany" :callback="resultCompany" :items="districtcompany"></yd-cityselect> -->
        <!--购物车  -->
        <div class="shopping" @click="shoppingCart">
            <yd-icon name="shopcart-outline" size='0.5rem'></yd-icon>
            <yd-badge class="badge" type="danger" v-if="shoppingNum>0">{{shoppingNum}}</yd-badge>
        </div>
    </div>
</template>

<script>
// import District from 'ydui-district/dist/jd_province_city';

export default {
    name: 'scroll',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            value: '',
            show: false,
            showCompany: false,
            model: '所有地区',
            companyText: '中粮',
         // companyText: '所有企业',
            districtcounty: [],
            countyId: '',
            districtcompany: [],
            companyId: '',
            list: [],
            page: 1,
            pageSize: 10,
            shoppingNum: 0,
            scrollPostion: 0,
            pageIndex: 0,
        }
    },
    created: function() {
        this.value = this.$store.state.searchLove;

        this.$dialog.loading.open('请稍后');
        // 数据的取得顺序： county -->>company -->>nums -->>init
        this.county();
        // this.company();
        //this.nums();
        // this.init();
    },
    methods: {
        county() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/countryorcompany?paramType=county')
                .then((response) => {
                    if (response.status == 200) {
                        let a = JSON.stringify(response.data.object);
                       // 返回值为storeId、paramValue
                       // let b = a.replace(/storeId/g, 'v').replace(/paramValue/g, 'n');
                       // 返回值为paramId、paramValue
                        let b = a.replace(/paramId/g, 'v').replace(/paramValue/g, 'n');
                        this.districtcounty = JSON.parse(b);
                    }
                    
                    // 所有企业下拉列表的取得
                    this.company();
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '所有地区的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        company() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/countryorcompany?paramType=company')
                .then((response) => {
                    if (response.status == 200) {
                        let a = JSON.stringify(response.data.object);
                       // 返回值为storeId、paramValue
                       // let b = a.replace(/storeId/g, 'v').replace(/paramValue/g, 'n');
                       // 返回值为paramId、paramValue
                        let b = a.replace(/paramId/g, 'v').replace(/paramValue/g, 'n');
                        this.districtcompany = JSON.parse(b);
                    }

                    // 购物车数据检索
                    this.nums();
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '所有企业的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        nums() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/statistics')
                .then((response) => {
                    if (response.status == 200) {
                        this.shoppingNum = response.data.object.cartGoodsNum;
                    }

                    // 数据检索
                    let pageParams = this.$store.state.pageParams;
                    // 只要pageParams有值的话，就确定是从跳转后的页面返回的
                    if (pageParams) {
                        this.$store.commit('pageParams', ''); 
                        var paramObj = JSON.parse(JSON.stringify(pageParams));
                        this.value = paramObj.searchContent;
                        this.scrollPostion = paramObj.scrollPostion;
                        this.pageIndex = paramObj.pageIndex;
                        // 选择地区的设定                        
                        // 必选是当前页面，页面未加载完就跳转的话不能调用emit)
                        if (this.$refs.infinitescrollDemo != undefined) { 
                            let countyRet = {itemName1: paramObj.countyName, itemValue1: paramObj.countyId}
                            //resultCounty方法调用了init、infinitescrollDemo.emit
                            this.resultCounty(countyRet);
                        }
                    } else {
                        this.init();
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '购物车数据的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        init() {
            let msg = this.$qs.stringify({
                key: this.value,
                countyId: this.countyId,
             // companyId: this.companyId,
                orderByType: 'DESC',
                p: this.page,
                pageSize: this.pageSize,
                recommendType: 'axzl',
            })
           this.$axios.post(this.CONSTANT.wapiBaseUrl + 'goods/searchSupportGoods', msg)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        let _list = response.data.object;
                        this.list = [...this.list, ..._list];

                        // 必选是当前页面，页面未加载完就跳转的话不能调用emit)
                        if (this.$refs.pullrefreshDemo != undefined) {                            
                            this.$refs.pullrefreshDemo.$emit('ydui.pullrefresh.finishLoad');
                            if (_list.length < this.pageSize) {
                                /* 所有数据加载完毕 */
                                this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                                //if (this.page == 1) {
                                //    document.getElementById("scroll").scrollTop = this.scrollPostion;
                                //} else {
                                //    document.getElementById("scroll").scrollTop = this.scrollPostion + 1500;
                                //}
                                return;
                            }
                            /* 单次请求数据完毕 */
                            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
                            this.page++;                        
                            //if (this.page <= this.pageIndex) {
                            //    this.init();
                            //} else {
                            //    document.getElementById("scroll").scrollTop = this.scrollPostion;
                            //}
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: '商品信息的取得失败，请联系客服',
                        icon: 'error',
                        timeout: 1500
                    });
                });
        },
        submitHandler() {
            this.page = 1;
            this.list = [];
            this.model = '所有地区';
            this.countyId = '';
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.init();
        },
        resultCounty(ret) {
            this.page = 1;
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.model = ret.itemName1;
            this.list = [];
            this.countyId = ret.itemValue1;
            this.init();
        },
        resultCompany(ret) {
            this.page = 1;
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.companyText = ret.itemName1;
            this.list = [];
            this.companyId = ret.itemValue1;
            this.init();
        },
        callLoadList() {
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.reInit');
            this.value = '';
            this.page = 1;
            this.list = [];
            this.init();
        },
        loadList() {
            this.init();
        },
        commodity(goodsCommonid) {
            // 保存当前页面的条件
            let pageParams = {
                countyId: this.countyId,
                countyName:  this.model,
                searchContent:  this.value,
                pageIndex: this.page,
                scrollPostion: document.getElementById("scroll").scrollTop
            };
            this.$store.commit('pageParams', pageParams);
            this.$router.push({
                name: 'commodity', 
                query: { 
                    goodsCommonid: goodsCommonid 
                }
            });
        },
        shoppingCart() {
            // 保存当前页面的条件
            let pageParams = {
                countyId: this.countyId,
                countyName:  this.model,
                scrollPostion: document.getElementById("scroll").scrollTop
            };
            this.$store.commit('pageParams', pageParams);
            this.$router.push('/shoppingCart');
        },
    }
}
</script>
<style scoped>
#scroll {
    width: 100%;
    /* height: auto;
    overflow: hidden; */
    padding-top: 1.7rem;    
    height: 12.5rem;
    overflow-y: scroll;
}

.fiexd_search {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    box-shadow: 0 3px 6px #DACDBA;
}

.fiexd_ul {
    width: 100%;
    height: 0.8rem;
    line-height: 0.6rem;
    font-size: 14px;
    color: #DACEB8;
    box-sizing: border-box;
    padding: 0.1rem 0;
    background: #fff;
    text-align: center;
}

#scroll .demo-list-price {
    font-size: 14px;
    color: #c7000a;
}

.decoration-price {
    margin-left:12px;
    font-size:10px;
    color:#666;
    text-decoration:line-through;
}

.fiexd_ul li {
    width: 50%;
    float: left;
    box-sizing: border-box;
}

.fiexd_ul li:nth-of-type(1) {
    border-right: 1px solid #EDEDED;
}

.fiexd_ul li {
    display: flex;
    align-content: center;
    justify-content: center;
}

#scroll .demo-list-del-price {
    text-decoration: line-through;
}

.shopping {
    position: fixed;
    right: 5%;
    bottom: 1rem;
    width: 1rem;
    z-index: 99;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    font-weight: 400;
    height: 1rem;
    border-radius: 50%;
    background: #F4A9A3;
}

.badge {
    position: absolute;
    right: 0;
    top: -0.1rem;
}
</style>

<style>
#scroll .loadList .yd-list-img {
    padding-bottom: 0!important;
}

#scroll .fiexd_ul i {
    font-size: 14px!important;
    margin-left: 5px;
}

#scroll .fiexd_ul [class^="icon-custom-"]:before,
[class*=" icon-custom-"]:before {
    font-size: 14px!important;
}

#scroll .yd-search-input {
    background: #DACDBA;
}

#scroll .yd-list-img {
    min-height: 2rem;
    padding-bottom: 0!important;
}
</style>